<template>
  <div class="container">
    <div class="ui-title">基础用法</div>
    <v-input label="文本" v-model="value1"/>

    <div class="ui-title">自定义类型</div>
    <cell-group>
      <v-input label="收货人" v-model="value2" pr="请输入收货人"/>
      <v-input label="联系方式" v-model="value3" pr="请输入联系方式"/>
      <v-input label="收货地址" v-model="value4" pr="请输入收货地址"/>
      <v-input label="密码" v-model="value5" type="password" pr="请输入密码"/>
    </cell-group>

    <div class="ui-title">禁用</div>
    <v-input label="状态" v-model="value6" disabled/>

    <div class="ui-title">对齐方式</div>
    <cell-group>
      <v-input label="收货人" v-model="value2" pr="请输入收货人" input-align="right"/>
      <v-input label="联系方式" v-model="value3" pr="请输入联系方式" input-align="right"/>
      <v-input label="收货地址" v-model="value4" pr="请输入收货地址" input-align="right"/>
      <v-input label="密码" v-model="value5" type="password" pr="请输入密码" input-align="right"/>
    </cell-group>

    <div class="ui-title">卡片风格</div>
    <cell-group :radius="10" style="width: 95%;">
      <v-input label="收货人" v-model="value8" pr="请输入收货人"/>
      <v-input label="联系方式" v-model="value9" pr="请输入联系方式"/>
      <v-input label="收货地址" v-model="value10" pr="请输入收货地址"/>
      <v-input label="邮政编码" v-model="value11" pr="请输入密码"/>
    </cell-group>
  </div>
</template>

<script>
import CellGroup from "../../components/cell-group";
import VInput from "../../components/input";
export default {
  components: {
    CellGroup,
    VInput,
  },
  data() {
    return {
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '12345678',
      value6: '输入框已禁用',
      value7: '',
      value8: '',
      value9: '',
      value10: '',
      value11: '',
    };
  },
  methods: {},
};
</script>


<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 20px;
}
</style>